<template>
<div id="login">
    <p style="text-align:center">用户名：admin;密码：12345678</p>
  <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
    <a-form-model-item has-feedback label="用户名" prop="name">
      <a-input v-model="ruleForm.name" type="text" autocomplete="off" placeholder="admin" />
    </a-form-model-item>
    <a-form-model-item has-feedback label="密码" prop="checkPass">
      <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" placeholder="12345678" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="submitForm('ruleForm')">
        提交
      </a-button>
      <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
        重置
      </a-button>
    </a-form-model-item>
  </a-form-model>
</div>
</template>
<script>
import {mapActions } from 'vuex'
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        checkPass: '',
      },
      rules: {
        name: [{ required: true, message: '请输入用户名admin', trigger: 'change' }],
        checkPass: [{ required: true, message: '请输入密码12345678', trigger: 'change' }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
    };
  },
  methods: {
      ...mapActions(['setTokenAction']),
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.ruleForm.name==='admin'&&this.ruleForm.checkPass==="12345678"){
              this.setTokenAction({name:'admin',pass:'123456789'}).then(res=>{
              this.$router.push({path:'/layout/welcome'})

              })
             
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
#login{
  width:500px;
  margin: 200px auto;
}
</style>